<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="card-title">WiFi认证配置管理</span>
        <el-button
          style="float: right"
          type="primary"
          size="small"
          icon="el-icon-refresh"
          @click="getConfig"
        >刷新</el-button>
      </div>

      <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="200px">

        <!-- 基础配置 -->
        <el-divider content-position="left">
          <i class="el-icon-setting" /> 基础配置
        </el-divider>

        <el-form-item label="临时上网时长" prop="tempOnlineDuration">
          <el-input-number
            v-model="form.tempOnlineDuration"
            :min="1"
            :max="10"
            :step="1"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">分钟</span>
          <div class="form-item-tip">
            用户首次连接WiFi的临时上网时长，建议1-5分钟
          </div>
        </el-form-item>

        <el-form-item label="路由器轮询间隔" prop="pollingInterval">
          <el-input-number
            v-model="form.pollingInterval"
            :min="1"
            :max="60"
            :step="1"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">秒</span>
          <div class="form-item-tip">
            路由器向服务器查询认证状态的轮询间隔，建议5-30秒
          </div>
        </el-form-item>

        <el-form-item label="认证后上网时长" prop="authOnlineDuration">
          <el-input-number
            v-model="form.authOnlineDuration"
            :min="10"
            :max="240"
            :step="10"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">分钟</span>
          <div class="form-item-tip">
            用户观看广告完成认证后的上网时长，建议30-120分钟
          </div>
        </el-form-item>

        <!-- 高级配置 -->
        <el-divider content-position="left">
          <i class="el-icon-s-tools" /> 高级配置
        </el-divider>

        <el-form-item label="Redis额外过期时间" prop="redisExtraExpire">
          <el-input-number
            v-model="form.redisExtraExpire"
            :min="5"
            :max="60"
            :step="5"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">秒</span>
          <div class="form-item-tip">
            Redis临时认证记录的额外过期时间，用于路由器有足够时间轮询
          </div>
        </el-form-item>

        <!-- 防刷配置 -->
        <el-divider content-position="left">
          <i class="el-icon-warning-outline" /> 防刷限制
        </el-divider>

        <el-form-item label="防刷时间窗口" prop="antiAbuseWindow">
          <el-input-number
            v-model="form.antiAbuseWindow"
            :min="10"
            :max="120"
            :step="10"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">分钟</span>
          <div class="form-item-tip">
            防止用户反复使用临时上网的时间窗口，建议20-60分钟
          </div>
        </el-form-item>

        <el-form-item label="防刷最大次数" prop="antiAbuseMaxCount">
          <el-input-number
            v-model="form.antiAbuseMaxCount"
            :min="1"
            :max="10"
            :step="1"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">次</span>
          <div class="form-item-tip">
            时间窗口内允许的最大临时上网次数，建议2-5次
          </div>
        </el-form-item>

        <el-form-item label="防刷封禁时长" prop="antiAbuseBanDuration">
          <el-input-number
            v-model="form.antiAbuseBanDuration"
            :min="10"
            :max="120"
            :step="10"
            controls-position="right"
            style="width: 200px"
          />
          <span class="input-unit">分钟</span>
          <div class="form-item-tip">
            超过限制后的封禁时长，建议与时间窗口相同或更长
          </div>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="submitLoading" @click="submitForm">
            <i class="el-icon-check" /> 保存配置
          </el-button>
          <el-button @click="resetForm">
            <i class="el-icon-refresh-left" /> 重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 配置说明 -->
      <el-alert
        title="配置说明"
        type="info"
        :closable="false"
        style="margin-top: 20px"
      >
        <div slot="default">
          <p><strong>防刷机制：</strong>用户在时间窗口内临时上网次数超过最大次数后，将被封禁指定时长，无法再次获取临时上网资格。</p>
          <p><strong>示例：</strong>30分钟内最多3次，超过后封禁30分钟。</p>
          <p><strong>注意：</strong>配置修改后立即生效，无需重启服务。</p>
        </div>
      </el-alert>
    </el-card>
  </div>
</template>

<script>
import { getWifiConfig, updateWifiConfig } from '@/api/wifi/config'

export default {
  name: 'WifiConfig',
  data() {
    return {
      // 加载状态
      loading: false,
      submitLoading: false,
      // 表单数据
      form: {
        tempOnlineDuration: 1,
        tempOnlineDuration_dictCode: null,
        pollingInterval: 5,
        pollingInterval_dictCode: null,
        authOnlineDuration: 60,
        authOnlineDuration_dictCode: null,
        redisExtraExpire: 10,
        redisExtraExpire_dictCode: null,
        antiAbuseWindow: 30,
        antiAbuseWindow_dictCode: null,
        antiAbuseMaxCount: 3,
        antiAbuseMaxCount_dictCode: null,
        antiAbuseBanDuration: 30,
        antiAbuseBanDuration_dictCode: null
      },
      // 表单验证规则
      rules: {
        tempOnlineDuration: [
          { required: true, message: '请输入临时上网时长', trigger: 'blur' },
          { type: 'number', min: 1, max: 10, message: '请输入1-10之间的数字', trigger: 'blur' }
        ],
        pollingInterval: [
          { required: true, message: '请输入路由器轮询间隔', trigger: 'blur' },
          { type: 'number', min: 1, max: 60, message: '请输入1-60之间的数字', trigger: 'blur' }
        ],
        authOnlineDuration: [
          { required: true, message: '请输入认证后上网时长', trigger: 'blur' },
          { type: 'number', min: 10, max: 240, message: '请输入10-240之间的数字', trigger: 'blur' }
        ],
        redisExtraExpire: [
          { required: true, message: '请输入Redis额外过期时间', trigger: 'blur' },
          { type: 'number', min: 5, max: 60, message: '请输入5-60之间的数字', trigger: 'blur' }
        ],
        antiAbuseWindow: [
          { required: true, message: '请输入防刷时间窗口', trigger: 'blur' },
          { type: 'number', min: 10, max: 120, message: '请输入10-120之间的数字', trigger: 'blur' }
        ],
        antiAbuseMaxCount: [
          { required: true, message: '请输入防刷最大次数', trigger: 'blur' },
          { type: 'number', min: 1, max: 10, message: '请输入1-10之间的数字', trigger: 'blur' }
        ],
        antiAbuseBanDuration: [
          { required: true, message: '请输入防刷封禁时长', trigger: 'blur' },
          { type: 'number', min: 10, max: 120, message: '请输入10-120之间的数字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    /** 获取配置 */
    getConfig() {
      this.loading = true
      getWifiConfig().then(response => {
        // 将字符串转换为数字
        this.form.tempOnlineDuration = parseInt(response.data.tempOnlineDuration)
        this.form.tempOnlineDuration_dictCode = response.data.tempOnlineDuration_dictCode
        this.form.pollingInterval = parseInt(response.data.pollingInterval)
        this.form.pollingInterval_dictCode = response.data.pollingInterval_dictCode
        this.form.authOnlineDuration = parseInt(response.data.authOnlineDuration)
        this.form.authOnlineDuration_dictCode = response.data.authOnlineDuration_dictCode
        this.form.redisExtraExpire = parseInt(response.data.redisExtraExpire)
        this.form.redisExtraExpire_dictCode = response.data.redisExtraExpire_dictCode
        this.form.antiAbuseWindow = parseInt(response.data.antiAbuseWindow)
        this.form.antiAbuseWindow_dictCode = response.data.antiAbuseWindow_dictCode
        this.form.antiAbuseMaxCount = parseInt(response.data.antiAbuseMaxCount)
        this.form.antiAbuseMaxCount_dictCode = response.data.antiAbuseMaxCount_dictCode
        this.form.antiAbuseBanDuration = parseInt(response.data.antiAbuseBanDuration)
        this.form.antiAbuseBanDuration_dictCode = response.data.antiAbuseBanDuration_dictCode
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 提交表单 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.submitLoading = true
          // 将数字转换为字符串
          const data = {
            tempOnlineDuration: this.form.tempOnlineDuration.toString(),
            tempOnlineDuration_dictCode: this.form.tempOnlineDuration_dictCode,
            pollingInterval: this.form.pollingInterval.toString(),
            pollingInterval_dictCode: this.form.pollingInterval_dictCode,
            authOnlineDuration: this.form.authOnlineDuration.toString(),
            authOnlineDuration_dictCode: this.form.authOnlineDuration_dictCode,
            redisExtraExpire: this.form.redisExtraExpire.toString(),
            redisExtraExpire_dictCode: this.form.redisExtraExpire_dictCode,
            antiAbuseWindow: this.form.antiAbuseWindow.toString(),
            antiAbuseWindow_dictCode: this.form.antiAbuseWindow_dictCode,
            antiAbuseMaxCount: this.form.antiAbuseMaxCount.toString(),
            antiAbuseMaxCount_dictCode: this.form.antiAbuseMaxCount_dictCode,
            antiAbuseBanDuration: this.form.antiAbuseBanDuration.toString(),
            antiAbuseBanDuration_dictCode: this.form.antiAbuseBanDuration_dictCode
          }
          updateWifiConfig(data).then(response => {
            this.$modal.msgSuccess('配置更新成功')
            this.submitLoading = false
            this.getConfig()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    /** 重置表单 */
    resetForm() {
      this.getConfig()
      this.$refs['form'].clearValidate()
    }
  }
}
</script>

<style scoped>
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.input-unit {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}

.form-item-tip {
  margin-top: 5px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}

.el-divider {
  margin: 30px 0 20px 0;
}

.el-divider__text {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
}

.el-alert >>> .el-alert__description p {
  margin: 5px 0;
  line-height: 1.8;
}
</style>

